<template>
  <div>
    <button @click="start">开始抢答</button>
    <button @click="reset">重置</button>
    <div v-if="firstResponder">
      抢答成功者: {{ firstResponder }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      firstResponder: null
    };
  },
  mounted() {
    this.ws = new WebSocket('ws://localhost:5274');
    this.ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'firstResponder') {
        this.firstResponder = data.userId;
      }
    };
  },
  methods: {
    start() {
      this.ws.send(JSON.stringify({
        type: 'control',
        action: 'start'
      }));
    },
    reset() {
      this.ws.send(JSON.stringify({
        type: 'control',
        action: 'reset'
      }));
      this.firstResponder = null;
    }
  }
};
</script>
